<template>
  <div style="min-height: 300px; border-bottom: 1px solid rgb(240, 240, 240); margin-bottom: 20px">
    <div class="list_th">
      <a-row style="display: flex; aligin-item: center">
        <a-col style="padding-left: 16px; margin-right: 16px; display: block; float: left">
          <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange"
        /></a-col>
        <a-col
          v-for="(item, index) in list_th"
          :key="index"
          :span="item.span"
          :style="[{ marginRight: '16px' }, { width: index == 0 ? '260px' : '' }, { flex: index != 0 ? '1' : '' }]"
          >{{ item.title }}
        </a-col>
      </a-row>
    </div>

    <a-empty :image="simpleImage" v-show="!pagaData.length" />
    <div class="list_li" v-for="(item, index) in pagaData" :key="index">
      <a-row class="row_head">
        <a-col style="padding-left: 16px; margin-right: 16px"> <a-checkbox v-model="item.is_checked" /></a-col>
        <a-col span="23" style="display: flex; justify-content: space-between; padding-right: 20px">
          <div>
            <a-icon type="link" style="margin-right: 4px; color: rgba(0, 0, 0, 0.65); font-size: 14px" />

            <a-tooltip>
              <template slot="title"> 双击复制 </template>
              <span class="order-num" @dblclick="copyText(item.order_no)">订单号：{{ item.order_no }}</span>
            </a-tooltip>
          </div>
          <span v-if="item.order_type == 3 && item.food_book_ext && item.food_book_ext != ''">
            {{ JSON.parse(item.food_book_ext).time }}
          </span>
        </a-col>
      </a-row>

      <a-row class="row_goods">
        <a-col style="padding-left: 16px; margin-right: 25px; width: 20px">
          <a-icon
            :type="item.is_open ? 'minus-square' : 'plus-square'"
            class="plusIcon"
            @click="openItem(item)"
            v-show="item.goods_list.length > 1"
          ></a-icon
        ></a-col>

        <a-col
          v-for="(inner, index) in list_th"
          :key="index"
          :style="[{ marginRight: '16px' }, { width: index == 0 ? '277px' : '' }, { flex: index == 0 ? '' : '1' }]"
          :span="inner.span"
        >
          <!-- 产品名称 -->
          <div v-if="inner.title == '商品信息'">
            <a-row :gutter="10" v-for="(el, inx) in getItemPic(item)" :key="inx" style="margin: 5px 0">
              <img
                :src="el.pic_url"
                style="width: 48px; height: 48px; border-radius: 4px; margin-right: 16px; display: block"
              />
              <a-col span="18" style="padding: 0; width: auto">
                <a-tooltip>
                  <template slot="title">
                    {{ el.name }}
                  </template>
                  <h4 class="over_e fw_b">{{ el.name }}</h4>
                </a-tooltip>

                <a-tooltip>
                  <template slot="title">
                    {{ el.attr_name ? el.attr_name : '默认' }}
                  </template>
                  <div class="over_e">规格：{{ el.attr_name ? el.attr_name : '默认' }}</div>
                </a-tooltip>
              </a-col>
            </a-row>
          </div>

          <!-- 单价数量 -->
          <div v-if="inner.title == '单价/数量'">
            <div v-for="(el, inx) in getItemPic(item)" :key="inx">
              <div>小计：{{ el.price }}元</div>
              <div>数量：{{ el.num }}</div>
            </div>
          </div>

          <!-- 运费 -->
          <div v-if="inner.title == '运费/优惠'">
            <div v-show="inner.type == 'list' || inner.type == 'offlineList'">
              <div>运费：{{ item.express_price }}元</div>
              <p style="margin-bottom: 0">
                <span>优惠金额：{{ item.all_discount || 0 }}元</span>
              </p>
            </div>
          </div>

          <!-- 订单金额 -->
          <div v-if="inner.title == '订单金额'">
            <div>应付款:{{ item.pay_price }}元</div>
            <div>实际支付:{{ item.pay_price }}元</div>
          </div>

          <!-- 买家/配送方式 -->
          <div v-if="inner.title == '买家/配送方式'">
            <div>{{ item.name }}</div>
            <div>{{ item.send_type === '1' ? '快递配送' : '自主配送' }}</div>
          </div>

          <!-- 下单门店/时间 -->
          <div v-if="inner.title == '供货商/下单时间'">
            <div>{{ item.supplier.name }}</div>
            <div>{{ item.created_at }}</div>
          </div>

          <!-- 订单状态 -->
          <div v-if="inner.title == '订单状态'">
            <span class="tag" :style="item.status | orderStatus"></span>
            <span v-if="item.goods_send_type !== '1'">
              {{ getStatus2(item.status) }}
            </span>
            <span v-else>
              {{ getCentralized(item.centralized_status, item.status) }}
            </span>
          </div>

          <!-- 集采状态 -->
          <div v-if="inner.title == '配送方式'">
            {{ getShippingType(item.goods_send_type) }}
          </div>

          <!-- 售后状态 -->
          <div v-if="inner.title == '售后状态'">
            {{ getStatus(item.is_show_refund) || '-' }}
          </div>

          <!-- 拒绝原因 -->
          <div v-if="inner.title == '拒绝原因'">
            {{ item.refuse_desc || '-' }}
          </div>

          <!-- 操作 -->
          <div v-if="inner.title == '操作'" class="row_actions">
            <a v-if="item.goods_send_type === '1' && item.status !== '2'" @click="$emit('receipt', item)">确认收货</a>
            <a v-if="item.is_show_refund === 1 && item.goods_send_type !== '1'" @click="$emit('applyAfterSale', item)">申请售后</a>
            <a v-else-if="item.is_show_refund === 3" @click="$emit('send', item)">发货</a>
            <span v-else>-</span>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { Empty } from 'ant-design-vue'

export default {
  props: {
    list_th: {
      type: Array,
      default: () => [],
    },
    pagaData: {
      type: Array,
      default: () => [],
    },
  },

  data() {
    return {
      confirmLoading: false,
      infoItem: null,
    }
  },

  filters: {
    orderStatus(val) {
      if (val == 0) {
        return 'background-color:#faad14;'
      }

      if (val == 1 || val == 2) {
        return 'background-color:#65c817;'
      }
    },
  },

  computed: {
    getShippingType() {
      return (type) => {
        let str = ''

        switch (String(type)) {
          case '0':
            str = '快递'
            break
          case '1':
            str = '集采'
            break
          case '2':
            str = '供货商自主配送'
            break
        }
        return str
      }
    },
    getStatus2() {
      return (status) => {
        let str

        switch (status) {
          case '0':
            str = '待确认'
            break

          case '1':
            str = '已发货'
            break

          case '2':
            str = '已完成'
            break
        }

        return str
      }
    },
    getCentralized() {
      return (centralized_status, status) => {
        let str

        switch (parseInt(centralized_status)) {
          case 0:
            str = '待处理'
            break

          case 1:
            str = '已生成配货单'
            break

          case 2:
            str = '供货商已发往中央仓'
            break

          case 3:
            str = '中央仓已收货'
            break

          case 4:
            str = '拣货完成'

            if (parseInt(status) === 2) {
              str = '已确认收货'
            }
            break
        }

        return str
      }
    },
    getStatus() {
      return (is_show_refund) => {
        let str

        switch (is_show_refund) {
          case -1:
            str = '等待处理'
            break

          case 1:
            str = '-'
            break

          case 2:
            str = '已拒绝'
            break

          case 3:
            str = '待商家发货'
            break

          case 4:
            str = '等待供货商确认收货'
            break

          case 5:
            str = '已经打款'
            break

          case 6:
            str = '已经退换货'
            break
        }

        return str
      }
    },

    getItemPic() {
      return ({ goods_list, is_open }) => {
        return is_open ? goods_list : [goods_list[0]]
      }
    },

    indeterminate() {
      let len = this.pagaData.filter((item) => item.is_checked).length
      if (len && len != this.pagaData.length) {
        return true
      } else {
        return false
      }
    },

    checkAll() {
      let len = this.pagaData.filter((item) => item.is_checked).length
      if (len == this.pagaData.length && this.pagaData.length != 0) {
        return true
      } else {
        return false
      }
    },
  },

  watch: {},

  beforeCreate() {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
  },

  created() {},
  mounted() {},
  updated() {},

  methods: {
    onCheckAllChange(e) {
      let len = this.pagaData.filter((item) => item.is_checked).length
      if (len != this.pagaData.length) {
        this.pagaData.forEach((el) => {
          this.$set(el, 'is_checked', true)
        })
      } else {
        this.pagaData.forEach((el) => {
          this.$set(el, 'is_checked', false)
        })
      }
    },

    openItem(item) {
      if (typeof item.is_open == 'undefined') {
        this.$set(item, 'is_open', true)
        return
      }
      this.$set(item, 'is_open', !item.is_open)
    },

    copyText(data) {
      if (!data) return
      this.$copyText(data)
        .then((e) => {
          this.$message.success('复制成功')
        })
        .catch((err) => {
          console.log(err)
          this.$message.error('复制失败')
        })
    },
  },
}
</script>

<style scoped lang="less">
.plusIcon {
  cursor: pointer;
  transition: all 0.5s;
  &:hover {
    color: rgb(24, 144, 255);
  }
}

.fw_b {
  font-weight: bold;
}

.row_footer {
  border-top: 1px solid rgb(240, 240, 240);
  color: rgba(143, 143, 143);
  line-height: 50px;
}

.row_actions {
  display: flex;
  align-items: center;
  /deep/ .ant-btn {
    padding: 0;
  }
}

.list_li {
  /deep/.ant-row {
    display: flex;
    align-items: center;
  }
  .row_goods {
    transition: all 0.5s;
  }
  .row_footer {
    transition: all 0.5s;
  }

  &:hover {
    .row_head {
      background: rgb(230, 247, 255);
    }
    .row_goods {
      background: rgb(230, 247, 255);
    }
    .row_footer {
      background: rgb(230, 247, 255);
    }
  }
}

.list_li:hover {
  background: rgb(230, 247, 255);
}

.row_goods {
  padding: 15px 0;
}

.over_e {
  width: 192px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.list_th {
  background: rgb(250, 250, 250);
  height: 50px;
  line-height: 50px;
  color: black;
}

.row_head {
  border-top: 1px solid #e9e9e9;
  height: 53px;
  background: #fafafa;
  color: rgba(143, 143, 143);
  border-bottom: 1px solid #e9e9e9;
  .order-num {
    user-select: none;
    font-size: 14px;
    font-family: SFUIText-Regular;
    color: rgba(0, 0, 0, 0.85);
  }
}

.md_info {
  display: flex;
  flex-direction: column;
  font-size: 14px;

  color: rgba(0, 0, 0, 0.85);
  span {
    margin: 5px 0;
  }
}

/* .status {
  display: flex;
  align-items: center;
  span:nth-child(1) {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 4px;
  }
} */

/* .userInfo {
  margin-left: 10px;
  color: #333;
  img {
    position: relative;
    top: -2px;
    margin-right: 5px;
    width: 20px;
    height: 20px;
    border-radius: 32px;
    background: #666;
    overflow: hidden;
  }
} */

.tag {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
}
</style>

<style>
.draw_overlay .ant-tooltip-inner {
  color: #333 !important;
  background-color: #fff !important;
}
.draw_overlay .ant-tooltip-arrow::before {
  background-color: #fff;
}
</style>
